<template>
  <div class="toolbar">
    <div class="item" v-show="showChat" @click="goChat">
      <!-- <img src="/images/chat.png" alt @click="goChat" /> -->
      <span class="img_box chat_img"></span>
      <span class="message"></span>
    </div>
    <div class="item" v-show="getToken" @click="showMP">
      <!-- <img src="/images/message.png" alt /> -->
      <span class="img_box mes_img"></span>
      <span class="message" v-if="getMessPrompt || getComPrompt"></span>
    </div>
    <!-- <div class="item" v-show="getToken">
      <img src="/images/comment.png" alt="" />
      <span class="message"></span>
    </div>-->
    <div class="item" v-show="showMusic">
      <!-- <img src="/images/music.png" @click="showPanel" alt /> -->
      <span class="img_box music_img" @click="showPanel"></span>
    </div>
    <div class="item" v-show="showBack">
      <!-- <img src="/images/back.png" alt @click="goBack" /> -->
      <span class="img_box back_img" @click="goBack"></span>
    </div>
    <div class="item" v-show="showTop">
      <!-- <img src="/images/top.png" alt @click="goTop" /> -->
      <span class="img_box top_img" @click="goTop"></span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      showMusic: false,
      showTop: false,
      showChat: false,
      showBack: false
    }
  },
  computed: {
    ...mapGetters(['getToken', 'getPath', 'getComPrompt', 'getMessPrompt'])
  },
  watch: {
    getPath() {
      if (
        this.getPath == '/' ||
        this.getPath == '/main' ||
        this.getPath.includes('/musichome')
      ) {
        this.showMusic = false
      } else {
        this.showMusic = true
      }
      if (
        this.getPath == '/module/article' ||
        this.getPath == '/module/message' ||
        this.getPath == '/module/archive'
      ) {
        this.showTop = true
      } else {
        this.showTop = false
      }
      if (
        this.getPath == '/module/article' ||
        this.getPath == '/module/message' ||
        this.getPath == '/module/archive' ||
        this.getPath == '/statistical' ||
        this.getPath == '/chatroom'
      ) {
        this.showBack = true
      } else {
        this.showBack = false
      }
      if (this.getPath != '/chatroom' && this.getToken) {
        this.showChat = true
      } else {
        this.showChat = false
      }
    }
  },
  methods: {
    showPanel() {
      this.$EventBus.$emit('showPanel')
    },
    showMP() {
      this.$EventBus.$emit('messagePanel')
    },
    goTop() {
      this.$EventBus.$emit('goTop')
    },
    goBack() {
      if (this.getPath == '/module/article') {
        this.$EventBus.$emit('articleBack')
      } else {
        this.$router.go(-1)
      }
    },
    goChat() {
      this.$router.push('/chatroom')
    }
  }
}
</script>
<style lang="scss" scoped>
.toolbar {
  width: 50px;
  background: white;
  //   height: 200px;
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.2);
  z-index: 40;
  box-sizing: border-box;
  border-radius: 5px;
  .item {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    // img {
    //   width: 35px;
    //   height: 35px;
    //   object-fit: cover;
    // }
    // img:hover {
    //   cursor: pointer;
    // }
    .img_box {
      width: 35px;
      height: 35px;
      background-size: 110px auto;
    }
    .img_box:hover {
      cursor: pointer;
    }
    .chat_img {
      background-image: url('/images/tools.png');
      background-position: -1px 0px;
    }
    .mes_img {
      background-image: url('/images/tools.png');
      background-position: -42px 0px;
      background-size: 115px auto;
    }
    .music_img {
      background-image: url('/images/tools.png');
      background-position: -38px -35px;
      background-size: 115px auto;
    }
    .back_img {
      background-image: url('/images/tools.png');
      background-position: 0px 34px;
    }
    .top_img {
      background-image: url('/images/tools.png');
      background-position: -75px 0px;
    }
    .message {
      position: absolute;
      width: 12px;
      height: 12px;
      background: red;
      border-radius: 50%;
      top: 5px;
      right: 5px;
      animation: myAnimate 2s infinite linear;
    }
    @keyframes myAnimate {
      0% {
        opacity: 0.3;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
      100% {
        opacity: 0.3;
        transform: scale(0.8);
      }
    }
  }
}
</style>
